<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head :: head(~{::title}, ~{::style})">
    <meta charset="utf-8">
    <title>通知公告-修改</title>
    <style>
        .mui-input-row .input-icon {
            width: 50%;
            float: left;
        }

        .mui-input-row a {
            margin-right: 10px;
            float: right;
            text-align: left;
            line-height: 1.5;
        }

        .div_opinion {
            text-align: left;
        }

        .opinionContent {
            margin: 10px;
            width: 65%;
            float: right;
            font-weight: normal;
        }

        .opinionContent div {
            text-align: right;
        }

        .opinionContent div span {
            padding: 10px;
        }

        .opinionContent .content_h5 {
            color: #000;
            font-size: 17px;
        }

        #captureFile {
            display: none;
        }

        .mui-input-row label {
            color: #000;
        }

        .img-area {
            margin: 10px;
            list-style: none;
            padding: 2px;
        }
        .img-box {
            border: 1px solid #C1C0C0;
            width: 100px;
            height: 100px;
            float: left;
            margin: 5px;
            position: relative;
        }
        .img-box .capture_btn {
            margin: 5px 0 0 5px;
            width: 80px;
            height: 80px;
        }
        .img-box-img {
            width: 100px;
            height: 100px;
        }
        .btn-del-img {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 90px;
            top: -10px;
            z-index: 1;
        }
        .btn-del-img img {
            width: 16px;
            height: 16px;
        }
    </style>
    <script type="text/javascript" th:src="@{/weixin/js/visual/module_list.js}"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">通知公告</h1>
</header>
<div class="mui-content">
    <form id="formNotice" action="../../public/notice/edit.do" class="mui-input-group" enctype="multipart/form-data">
        <div class="mui-input-row" data-code="title" data-isnull="false">
            <label><span>标题</span><span style='color:red;'>*</span></label>
            <input type="text" id="title" name="title" class="mui-input-clear" th:value="${notice.title}"/>
        </div>
        <div class="mui-input-row mui-checkbox">
            <label><span>可否回复</span></label>
            <input type="checkbox" id="is_reply" name="isReply" value="1" th:checked="${notice.isReply == 1}" class="mui-input-clear"/>
        </div>
        <div class="mui-input-row mui-checkbox">
            <label><span>强制回复</span></label>
            <input type="checkbox" id="isForcedResponse"
                   name="isForcedResponse" th:checked="${notice.isForcedResponse==1}" value="1" class="mui-input-clear"/>
        </div>
        <div class="mui-input-row">
            <label><span>人员</span></label>
            <input type="text" th:value="${repliers}" readonly/>
        </div>
        <div class="mui-input-row" data-code="beginDate" data-isnull="false">
            <label><span>开始时间</span><span style='color:red;'>*</span></label>
            <input type="text" id="beginDate" name="beginDate"
                   th:value="${#temporals.format(notice.beginDate, 'yyyy-MM-dd')}" class="input-icon" readonly/>
            <a class="date_btn"><span class="iconfont icon-rili"></span></a>
        </div>
        <div class="mui-input-row">
            <label><span>结束时间</span></label>
            <input type="text" id="endDate" name="endDate" th:value="${#temporals.format(notice.endDate, 'yyyy-MM-dd')}" class="input-icon" readonly/>
            <a class="date_btn"><span class="iconfont icon-rili"></span></a>
        </div>
        <div class="mui-input-row" data-code="content" data-isnull="false">
            <label><span>内容</span><span style='color:red;'>*</span></label>
            <div style="text-align:center">
                <textarea id="content" name="content" placeholder="请输入内容" style="height:150px;">[[${notice.content}]]</textarea>
                <input id="isall" name="isall" th:value="${isAll}" type="hidden"/>
            </div>
        </div>
        <ul th:if="${#lists.size(attachments) > 0}" class="mui-table-view mui-table-view-chevron att_ul">
            <li class="mui-table-view-cell mui-media ">附件列表：</li>
            <li th:each="att, stat : ${attachments}" class="mui-table-view-cell mui-media att-li" th:attr="fId=${att.id}">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red att_del">删除</a>
                </div>
                <div class="mui-slider-handle">
                    <a class="attFile" href="javascript:;" th:attr="link=${att.visualPath} + ${att.diskName}">
                        <img class="mui-media-object mui-pull-left"
                             th:src="'../../weixin/images/file/' + ${att.icon}"/>
                        <div class="mui-media-body">
                            [[${att.name}]]
                        </div>
                    </a>
                </div>
            </li>
        </ul>
        <div>
            <ul class='mui-input-row img-area'><li class='img-box' style='border:0px'><img class='capture_btn' src='../../images/camera.png'></li></ul>
        </div>
        <div class="mui-button-row">
            <!--
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined capture-btn">照片</button>
            -->
            <button type="button" style="margin-left:5px;" class="mui-btn mui-btn-primary mui-btn-outlined btn-ok">确定</button>
        </div>
        <input name="skey" type="hidden" th:value="${nav.skey}"/>
        <input name="id" type="hidden" th:value="${notice.id}"/>
    </form>
    <input type="file" id="captureFile" name="upload" accept="image/*"/>
</div>
<script type="text/javascript" th:src="@{/weixin/js/macro/macro.js}"></script>
<!--解决iphone拍照变横向的问题-->
<script type="text/javascript" th:src="@{/weixin/js/exif.js}"></script>
<script th:inline="javascript">
    var isUniWebview = [[${nav.isUniWebview}]];

    if (!mui.os.plus) {
        // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
        $('.mui-bar').remove();
    }
    else {
        if (isUniWebview) {
            $('.mui-bar').remove();
        }
    }

    mui.init({
        keyEventBind: {
            backbutton: !isUniWebview //关闭back按键监听
        }
    });

    $(function () {
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });

        var data = formatDateTime(new Date);
        $('#mydate').val(data);

        $('#btnAll').click(function () {
            $('.next_user_div').html('<label>全部用户</label>');
        });

        var contextPath = [[@{/}]];

        $(".mui-content").on("tap", ".attFile", function () {
            var isMobileForbidDownload = [(${isMobileForbidDownload})];
            if (isMobileForbidDownload) {
                mui.toast('手机端禁止下载文件');
                return;
            }
        
            var id = jQuery(this).parent().parent().attr('fId');
            var url = jQuery(this).attr("link");
            var p = url.lastIndexOf(".");
            var ext = url.substring(p + 1);
            // if (ext == "jpg" || ext == "jpeg" || ext == "png" || ext == "gif" || ext == "bmp") {
            //     showImg(url);
            // } else {
            // url得是完整的路径，否则会报400错误
            // url = contextPath + url;
            url = contextPath + "notice/getFile?attachId=" + id;
            if (mui.os.plus) {
                var btnArray = ['是', '否'];
                mui.confirm('您确定要下载么？', '', btnArray, function (e) {
                    if (e.index == 0) {
                        var dtask = plus.downloader.createDownload(url, {}, function (d, status) {
                            if (status == 200) {
                                // 调用第三方应用打开文件
                                plus.runtime.openFile(d.filename, {}, function (e) {
                                    alert('打开失败');
                                });
                            } else {
                                alert("下载失败: " + status);
                            }
                        });
                        dtask.start();
                    }
                });
            } else {
                mui.openWindow({
                    "url": url
                })
            }
            // }
        })

        // 本页面无法显示图片，但当点击输入框弹出软键盘，再点击图片链接时能预览图片
        function showImg(path) {
            console.log(path);
            var openPhotoSwipe = function () {
                var pswpElement = document.querySelectorAll('.pswp')[0];
                var items = [{
                    src: contextPath + "public/showImg.do?path=" + encodeURI(path),
                    w: 964,
                    h: 1024
                }
                ];
                // define options (if needed)
                var options = {
                    // history & focus options are disabled on CodePen
                    history: false,
                    focus: false,
                    showAnimationDuration: 0,
                    hideAnimationDuration: 0
                };
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
            };
            openPhotoSwipe();
        }

        $(".mui-content").on('tap', '.att_del', function (event) {
            var elem = this;
            var li = elem.parentNode.parentNode;
            var fId = li.getAttribute("fId");//判断是否是新增
            var btnArray = ['确认', '取消'];
            mui.confirm('确认删除该条记录？', '提示', btnArray, function (e) {
                if (e.index == 0) {
                    if (fId != "0") {
                        mui.get("../../public/notice/delAtt.do", {
                            "skey": [[${nav.skey}]],
                            "attId": fId
                        }, function (data) {
                            var ret = data.ret;
                            var msg = data.msg;
                            mui.toast(msg);
                            if (ret == "1") {
                                li.parentNode.removeChild(li);
                                var _pLen = jQuery(".att-li").length;
                                if (_pLen == 0) {
                                    jQuery(".att_ul").remove();
                                }
                            }
                        }, "json");
                    } else {
                        li.parentNode.removeChild(li);
                        var _index = jQuery(li).index() - 1;
                        blob_arr.splice(_index, 1);
                        var _pLen = jQuery(".att-li").length;
                        if (_pLen == 0) {
                            jQuery(".att_ul").remove();
                        }
                    }
                }
            });
        });

        // 与macro.js联用
        mui(".mui-input-group").on("tap", ".capture-btn", function () {
            var cap = jQuery("#captureFile").get(0);
            cap.click();
        });

        // 日期选择控件
        $('.mui-input-group').on("tap", ".date_btn", function () {
            var id = this.getAttribute('id');
            var par = this.parentNode;
            var time_input = par.querySelector(".input-icon");
            var picker = new mui.DtPicker({"type": "date"});
            picker.show(function (rs) {
                jQuery(time_input).val(rs.value);
                picker.dispose();
            });
        });

        $(".mui-input-group").on("tap", ".choose_user_btn", function () {
            var checkedValues = [];
            jQuery(".next_user_ck").each(function (i) {
                checkedValues.push(jQuery(this).val());
            })
            var chooseUser = checkedValues.join(",");
            openChooseUser(chooseUser, false);
        });
    });

    $(function () {
        $('.btn-ok').click(function () {
            var _tips = "";
            jQuery("div[data-isnull='false']").each(function (i) {
                var _code = jQuery(this).data("code");
                var _val = jQuery("#" + _code).val();
                if (_val == undefined || _val == "") {
                    var _text = jQuery(this).find("span:first").text();
                    _tips += _text + " 不能为空<BR/>"
                }
            });
            if (_tips != null && _tips != "") {
                mui.toast(_tips);
                return;
            }

            var formData = new FormData($('#formNotice')[0]);
            // console.log("blob_arr.length=" + blob_arr.length);
            for (i = 0; i < blob_arr.length; i++) {
                var _blobObj = blob_arr[i];
                formData.append('upload', _blobObj.blob, _blobObj.fname);
            }

            jQuery.ajax("../../public/notice/edit.do", {
                dataType: 'json',// 服务器返回json格式数据
                type: 'post',// HTTP请求类型
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function (XMLHttpRequest) {
                    jQuery.myloading();
                },
                complete: function (XMLHttpRequest, status) {
                    jQuery.myloading("hide");
                },
                success: function (data) {
                    // mui.toast(data.msg);
                    if (data.ret == "1") {
                        // window.location.href = "notice_list.jsp?skey=<%=skey%>";
                        mui.alert(data.msg, function () {
                            mui.back();
                        })
                    }
                },
                error: function (xhr, type, errorThrown) {
                    console.log(type);
                }
            });
        });
    });

    function callJS() {
        return {"btnAddShow": 0, "btnBackUrl": ""};
    }

    // 与macro.js联用
    mui(".mui-input-group").on("tap", ".capture_btn", function () {
        var cap = jQuery("#captureFile").get(0);
        cap.click();
    });
</script>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
</body>
</html>